<template>
  <v-container :key="locale" class="app-logo" height="var(--logo-height)">
    <v-row>
      <v-col class="split">
        {{ $t("APP_LOGO_TEXT") }}
        <svg
          class="logo-svg"
          data-name="Layer 1"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 842.14 500"
        >
          <path
            class="draw"
            d="M336.2,130.05C261.69,118,16.52,122,20.65,244.29c4.17,123,484.3,299.8,734.57,108.37,244-186.65-337.91-311-546.54-268.47"
            fill="none"
            stroke="#8486aa"
            stroke-miterlimit="10"
            stroke-width="8"
          />
        </svg>
      </v-col>
    </v-row>
  </v-container>
  <v-divider />
</template>

<script setup lang="ts">
import gsap from "gsap";
import { SplitText, DrawSVGPlugin } from "gsap/all";
import { useLayoutStore } from "@/stores/layoutStore";
import { useI18n } from "vue-i18n";
const { locale } = useI18n();

gsap.registerPlugin(DrawSVGPlugin);

const store = useLayoutStore();
const tl = gsap.timeline();
store.tl = tl;
const animation = () => {
  let split: any = null;
  if (split) {
    split.revert();
  }
  tl.clear();
  split = SplitText.create(".split", {
    type: "chars",
    mask: "lines",
    linesClass: "line++",
  });
  tl.from(split.chars, {
    duration: 1,
    y: gsap.utils.random(-80, 80, true), // 每个字符上下浮动不同
    x: gsap.utils.random(-60, 60, true), // 增加轻微水平偏移
    opacity: 0,
    scale: 0.6, // 初始稍小
    rotationY: 180, // 带3D翻转感
    ease: "back.out(10)", // 弹性回归，让动感更自然
    stagger: {
      amount: 0.8, // 整个动画持续时间的错位感
      from: "random", // 随机出现，非线性
    },
  });
  tl.fromTo(".draw", { drawSVG: "0%" }, { drawSVG: "100%", duration: 0.8 });
};
onMounted(() => {
  animation();
});

watch(locale, async () => {
  await nextTick();
  animation();
});
</script>

<style scoped>
.v-container {
  .v-row {
    .v-col {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      .logo-svg {
        width: 30%;
        position: absolute;
        top: 1%;
        left: 20%;
      }
    }
  }
}
</style>
